<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${cxt }/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编程语言页面</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #EFEFEF;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
}

.top {
	width: 1000px;
	height: 104px;
	background-color: #FFFFCC;
	border-radius: 10px;
	padding: 20px 0px 25px;
	margin: auto;
}

.login {
	float: left;
}

.top-word {
	float: left;
	width: 435px;
	line-height: 30px;
	margin-top: 25px;
	color: #646060;
	text-align: center;
}

.top-image {
	float: left;
	width: 149px;
	text-align: right;
}

.navigation_bar {
	width: 1000px;
	border-radius: 5px;
	background-color: #66CCCC;
	margin: 5px auto;
	height: 50px;
	box-shadow: 2px 2px 2px #bdbdbd;
}

.navigation_bar li {
	float: left;
	line-height: 34px;
	border-radius: 5px;
	padding: 9px 55.43px;
}

.navigation_bar li a {
	color: white;
	cursor: pointer;
}

.navigation_bar li:hover {
	background-color: #F15694;
}

.display {
	clear: both;
	width: 1000px;
	margin: auto;
}

.display_one {
	float: left;
	width: 700px;
}

.display_two {
	float: left;
	margin-left: 20px;
}

.display_one_plane {
	clear: both;
	width: 700px;
	height: 185px;
	background-color: #FFFFFF;
	margin-bottom: 20px;
}

.display_image {
	float: left;
	width: 215px;
	margin-top: 20px;
	margin-left: 10px;
	background-color: #FFFFFF;
}

.display_detail {
	float: left;
	width: 450px;
	margin-top: 28px;
	margin-left: 14px;
	line-height: 25px;
	font-size: 14px;
	background-color: #FFFFFF;
}

.detail_title a {
	font-size: 18px;
	font-weight: 700;
	color: #000000;
}

.detail_title a:hover {
	color: red;
}

.detail_info {
	color: #919898;
}

.detail_info a {
	color: #919898;
}

.detail_info a:hover {
	color: #000000;
	cursor: pointer;
}

.detail_conent_p {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.detail_conent a {
	color: black;
}

.detail_conent a:hover {
	color: #0000EE;
	text-decoration: underline;
}

.display_two_plane {
	width: 275px;
	background-color: white;
	margin-bottom: 20px;
	position: relative;
}

.display_two_ul {
	background-color: white;
}

.display_two_ul li {
	width: 235px;
	line-height: 38px;
	margin-left: 40px;
	color: #919090;
}

.display_two_ul li:hover {
	padding-left: 20px;
}

.display_two_ul li a {
	color: #526163;
}

.display_two_ol {
	position: absolute;
	top: 45px;
}

.display_two_ol li {
	width: 20px;
	list-style: none;
	text-align: center;
	line-height: 20px;
	margin: 18px;
	margin-left: 8px;
	background-color: #EF8261;
	color: white;
	border-radius: 5px;
}

.buttom {
	clear: both;
	width: 1000px;
	line-height: 50px;
	margin: auto;
	text-align: center;
	margin-top: 20px;
	border-radius: 5px;
	background-color: #66CCCC;
	color: white;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
</head>

<body>
	<jsp:include page="header.jsp" />

	<!--文章推荐-->
	<div class="display">
		<div class="display_one">
			<p style="line-height: 52px;">文章推荐</p>
			<c:forEach items="${articleList }" var="article">
				<div class="display_one_plane">
					<ul>
						<li>
							<div>
								<div class="display_image">
									<img src="images/1-1406052123280-L.jpg"
										style="width: 215px; height: 144px;">
								</div>
								<div class="display_detail">
									<div class="detail_title">
										<a href="#">${article.article_title }</a>
									</div>
									<div class="detail_info">
										<span><img src="images/author.png"></span>&nbsp;&nbsp; <span><a
											href="#">${article.user_name }</a></span>&nbsp;&nbsp;&nbsp; <span>发布时间:</span> 
											<span>${article.article_time }</span>&nbsp;&nbsp;&nbsp; <span>分类:</span> <span>${article.types_name }</span>
									</div>
									<div class="detail_conent">
										<p class="detail_conent_p">
											${article.article_content }
										</p>
										<span>浏览量：</span><span>${article.article_readnumber }</span>&nbsp;&nbsp;&nbsp;<span>点赞数:</span>
										<span>${article.article_supportnumber  }</span>&nbsp;&nbsp;&nbsp;<span>评论量:</span><span>100</span>&nbsp;&nbsp;&nbsp;<span><a
											href="#">查看详情</a></span>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</c:forEach>
		</div>

		<div class="display_two">
			<p style="line-height: 52px;">热门推荐</p>
			<c:forEach items="${hotRecommendList }" var="hotlist">
				<div class="display_two_plane">
					<div class="display_two_ul">
						<p style="line-height: 52px; font-size: 18px; margin-left: 8px;">${hotlist.types_name }</p>
						<ul>
							<c:forEach items="${hotlist.article_title }" var="hot"
								varStatus="go">
								<li><a href="index">${hot}</a></li>
								<hr style="border: 0.5px solid #E2DFDF;" />
							</c:forEach>
						</ul>
					</div>
					<div class="display_two_ol">
						<c:forEach items="${hotlist.article_title }" varStatus="go">
							<li>${go.count}</li>
						</c:forEach>
					</div>
				</div>
			</c:forEach>
		</div>
	</div>

	<!--尾部-->
	<div class="buttom">
		<p>
			<span>Design by：llp 备案号：湘ICP备14011335号-2</span>
		</p>
	</div>

</body>

</html>